<template>
	<view class="search">
		<search-header @search="search"></search-header>
		<!-- 搜索历史 -->
		<view class="history px-2" v-if="showHistory">
			<view class="top">
				<view class="left">
					搜索历史
				</view>
				<view class="right">
					<u-icon name="trash" 
							color="#7f7f7f"
							size="40"
							@click="modal.title = modal.allTitle; modal.index = -1; modal.show = true;"
					></u-icon>
				</view>
			</view>
			<view class="keys py-1 overflow-hidden">
				<div v-for="(item, index) in history" :key="index"
					class="key"
					@dblclick="modal.title = modal.oneTitle; modal.show = true; modal.index = index;"
					@longpress="modal.title = modal.oneTitle; modal.show = true; modal.index = index;"
				>{{item}}</div>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="searchResult px-2" v-if="searchResult.isShow">
			<view v-if="!showHistory && showResult">
				<view class="top">
					搜索结果
				</view>
				<view class="article p-1 overflow-hidden" v-if="searchResult.articles.length != 0">
					<view class="title">文章</view>
					<view class="item"
						@click="$go('/pages/article/index?id=' + item.id)"
						v-for="(item, index) in searchResult.articles"
						:key="index"
					>
						{{item.title}}
					</view>
				</view>
				<view class="categories p-1 overflow-hidden" v-if="searchResult.categories.length != 0">
					<view class="title">分类</view>
					<view class="citem"
						v-for="(item, index) in searchResult.categories"
						:key="index"
						@click="$go('/pages/search/result/index?id=' + item.id)"
					>
						#{{item.name}}
					</view>
				</view>
				<view class="users p-1 overflow-hidden" v-if="searchResult.users.length != 0">
					<view class="title">用户</view>
					<view class="citem"
						v-for="(item, index) in searchResult.users"
						:key="index"
						style="color: gold;"
						@click="$go('/pages/user/info/index?id=' + item.id, null, 'navigateTo', {noAuth: false})"
					>
						#{{item.nickname}}
					</view>
				</view>
			</view>
			<view class="none text-center p-3" v-else>
				~暂无搜索结果与之匹配~
			</view>
		</view>
		<!-- 当日热点 -->
		<view class="hot p-2" v-if="hot.length != 0">
			<view class="top">
				当日热点
			</view>
			<view class="hot_item py-1"
				v-for="(item, index) in hot" :key="index"
				@click="$go('/pages/article/index?id=' + item.id)"
			>
				<view class="left"
					:class="{
						active: index < 3
					}"
				>{{index + 1}}</view>
				<view class="right">{{item.title}}</view>
			</view>
		</view>
		
		<u-modal :show="modal.show" :title="modal.title"
			showCancelButton 
			@confirm="dealConfirm()"
			@cancel="modal.show = false"
		></u-modal>
	</view>
</template>

<script>
	import searchHeader from "./cpn/searchHeader.vue";
	import {
		HISTORY_KEY_NAME
	} from "@/config/global.js";
	
	import {
		getHot,
		searchAll
	} from "@/api/search.js";
	
	export default {
		components: {
			searchHeader
		},
		data() {
			return {
				history: [],
				modal: {
					show: false,
					allTitle: '是否清空全部历史搜索记录？',
					oneTitle: '是否清空该历史搜索记录？',
					title: '',
					index: -1
				},
				hot: [],
				searchResult: {
					categories: [],
					articles: [],
					users: [],
					isShow: false
				}
			};
		},
		computed: {
			showHistory() {
				// 历史记录本身为空
				if(this.history && this.history.length == 0) return false;
				// 存在搜索结果时
				if(this.searchResult.categories.length != 0
					|| this.searchResult.articles.length != 0
					|| this.searchResult.users.length != 0
				) return false;
				// 剩下直接返回true
				return true;
			},
			showResult() {
				return (this.searchResult.categories.length != 0
					|| this.searchResult.articles.length != 0
					|| this.searchResult.users.length != 0)
			}
		},
		async mounted() {
			try{
				this.getHistoryKey();
				await this.getHot();
			}catch(e) {
				
			}
			
		},
		methods: {
			search(value) {
				searchAll({keyword: value}).then(res => {
					let result = {
						categories: res.categories,
						articles: res.articles,
						users: res.users,
						isShow: true
					};
					
					this.searchResult = result;
					// 设置成历史记录
					this.history.push = value;
					this.setHistoryKey();
				}).catch(err => this.$msg(err.message));
			},
			getHistoryKey() {
				let history = this.$cache.get(HISTORY_KEY_NAME);
				this.history = history? history : [];
			},
			setHistoryKey() {
				this.$cache.set(HISTORY_KEY_NAME, this.history);
			},
			dealConfirm() {
				if(this.modal.index > -1) this.clearItem(this.modal.index);
				else this.clearHistory();
			},
			// 清空历史
			clearHistory() {
				this.history = [];
				this.setHistoryKey();
				this.modal.show = false;
			},
			// 清空部分
			clearItem(index) {
				this.history.splice(index, 1);
				this.setHistoryKey();
				this.modal.show = false;
			},
			// 获取当日搜索热点
			getHot() {
				return new Promise((resolve, reject) => {
					getHot().then(res => {
						this.hot = res;
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.search{
	.history{
		.top{
			overflow: hidden;
			.left{
				float: left;
				font-weight: bold;
				color: #6b6b6b;
			}
			.right{
				float: right;
			}
		}
		.keys{
			.key{
				color: #868686;
				margin-left: 15rpx;
				margin-bottom: 10rpx;
				font-size: 30rpx;
				float: left;
			}
		}
	}
	.searchResult{
		.top{
			font-weight: bold;
			color: #6b6b6b;
		}
		.article, .categories, .users{
			overflow: hidden;
			.title{
				font-size: 27rpx;
				font-weight: bold;
				color: #7f7f7f;
			}
			.item{
				font-size: 25rpx;
				width: 680rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 5rpx 0;
			}
			.citem{
				float: left;
				margin-left: 15rpx;
				font-size: 25rpx;
				color: #0055ff;
				max-width: 300rpx;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		.none{
			color: #868686;
		}
	}
	.hot{
		.top{
			font-weight: bold;
			color: #6b6b6b;
		}
		&_item{
			overflow: hidden;
			border-bottom: 1rpx solid #f0f0f0;
			font-size: 27rpx;
			.left{
				float: left;
			}
			.active{
				color: red;
			}
			.right{
				float: right;
			}
		}
	}
}
</style>
